<template>
  <div class="pageWrapper">
    <common-header />
    <div class="content">
      <div class="select-wraaper">
        <!-- <div class="select-item flex-wrap" @click="showCopy = true">
          <span>考核单位：</span>
          <div>温州市xxx单位</div>
          <img src="@/assets/common/arrow-down.png" />
        </div> -->
        <div class="select-item flex-wrap" @click="showYear = true">
          <div>{{ param.year }}年</div>
          <img src="@/assets/common/arrow-down.png" />
        </div>
      </div>
      <div class="list">
        <pull-refresh-list ref="appraisal" :limit="param.pageSize" :page-no.sync="param.pageNo" :data.sync="list" @getList="getPage">
          <appraisal-item :isYear="$route.query.type == 'year'" :statusList="statusList" v-for="(item, index) in list" :key="index" :data="item" />
        </pull-refresh-list>
      </div>
    </div>

    <van-popup v-model="showCopy" position="bottom">
      <van-picker title="选择单位" show-toolbar :columns="copyColumns" @confirm="onCopyConfirm" @cancel="showCopy = false" />
    </van-popup>

    <van-popup v-model="showYear" position="bottom">
      <van-picker title="选择年份" :default-index="defaultIndex" show-toolbar :columns="yearColumns" @confirm="onYearConfirm" @cancel="showYear = false" />
    </van-popup>
  </div>
</template>

<script>
import appraisalItem from "./components/appraisal-item.vue";
import { getDictionaryByType } from "@/api/common";
import { getNormalDeptList, getYearEvaluationDept } from "@/api/appraisalProcess";
export default {
  components: {
    appraisalItem
  },
  data() {
    return {
      showCopy: false,
      showYear: false,
      copyColumns: [],
      yearColumns: [],
      param: {
        year: 0,
        pageNo: 1,
        pageSize: 10
      },
      list: [],
      statusList: {},
      defaultIndex: 0
    };
  },
  created() {
    let year = new Date().getFullYear();
    for (let i = year - 5; i <= year; i++) {
      this.yearColumns.push(i);
    }
    this.defaultIndex = this.yearColumns.length - 1;
    this.param.year = year;
    if (this.$route.query.type == "year") this.getStatusList();
  },
  methods: {
    onCopyConfirm() {
      this.showCopy = false;
    },
    onYearConfirm(e) {
      this.param.year = e;
      this.showYear = false;
      this.$refs.appraisal.onSearch();
    },
    getStatusList() {
      getDictionaryByType("appraisal_status").then(res => {
        res.data &&
          res.data.map(ele => {
            this.$set(this.statusList, ele.dictValue, ele.dictLabel);
          });
      });
    },
    getPage(callback) {
      let fn = this.$route.query.type == "year" ? getYearEvaluationDept : getNormalDeptList;
      let form = this.param;
      if (this.$route.query.type == "year") {
        form = {
          assessYear: this.param.year,
          current: this.param.pageNo,
          size: this.param.pageSize
        };
      }
      fn(form).then(res => {
        callback(res.data.records);
      });
    }
  }
};
</script>

<style scoped lang="scss">
.content {
  padding: 20px 16px;
  line-height: 20px;
  color: #333333;
  font-size: 14px;
}
.flex-wrap {
  display: flex;
  align-items: center;
}
.select-wraaper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  .select-item span {
    color: #999999;
    margin-right: 8px;
  }
  img {
    width: 12px;
    margin-left: 8px;
  }
}
</style>
